<template>
  <div class="detail-container">
    <el-tabs type="border-card">
      <el-tab-pane label="缴费信息详情" class="box">
        <div class="detail-form">
          <!-- 第一行：缴费产品和缴费人员 -->
          <div class="form-row">
            <div class="form-item">
              <label class="form-label">缴费产品:</label>
              <div class="form-value">{{list.payname}}</div>
            </div>
            <div class="form-item">
              <label class="form-label">缴费人员:</label>
              <div class="form-value">{{list.username}}</div>
            </div>
          </div>

          <!-- 第二行：缴费金额和缴费优先级 -->
          <div class="form-row">
            <div class="form-item">
              <label class="form-label">缴费金额:</label>
              <div class="form-value">{{list.paymoney}}</div>
            </div>
            <div class="form-item">
              <label class="form-label">缴费优先级:</label>
              <div class="form-value">{{list.paylevel}}</div>
            </div>
          </div>

          <!-- 第三行：支付时间和支付状态 -->
          <div class="form-row">
            <div class="form-item">
              <label class="form-label">支付时间:</label>
              <div class="form-value">{{formatDateTime(list.costtime) }}</div>
            </div>
            <div class="form-item">
              <label class="form-label">支付状态:</label>
              <div class="form-value">{{getCostStatusText(list.coststatus)}}</div>
            </div>
          </div>

          <!-- 支付类型 -->
          <div class="form-rowq">
            <label class="form-label">支付类型:</label>
            <div class="payment-types">
              <div class="payment-item">
                <el-radio v-model="selectedPayment" label="1" disabled class="payment-radio">
                  <div class="payment-type">
                    <img src="http://property.admin.byesame.com/img/zfb1.4e5cf19b.png" alt="支付宝" />
                  </div>
                </el-radio>
              </div>
              <div class="payment-item">
                <el-radio v-model="selectedPayment" label="2" disabled class="payment-radio">
                  <div class="payment-type">
                    <img src="http://property.admin.byesame.com/img/wx1.f21631b0.png" alt="微信支付" />
                  </div>
                </el-radio>
              </div>
              <div class="payment-item">
                <el-radio v-model="selectedPayment" label="3" disabled class="payment-radio">
                  <div class="payment-type">
                    <img src="http://property.admin.byesame.com/img/ysf.a4d32ab5.png" alt="银联支付" />
                  </div>
                </el-radio>
              </div>
            </div>
          </div>

          <!-- 回复内容 -->
          <div class="form-rowww">
            <label class="form-label">回复内容:</label>
            <div class="form-value">{{list.costcontent || '暂无回复内容'}}</div>
          </div>
        </div>

        <!-- 返回按钮 -->
        <div class="return-btn">
          <el-button type="primary" icon="el-icon-refresh-left" @click="back">返回</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        token: localStorage.getItem("token")
      },
      list: {
        payname: "",
        username: "",
        paymoney: "",
        paylevel: "",
        costtime: "",
        coststatus: "",
        costtype: "",
        costcontent: ""
      },
      selectedPayment: "", // 用于绑定选中的支付方式
      id: ""
    };
  },
  created() {
    let id = this.$route.query.id;
    this.id = id;
    if (id) {
      this.keep(id);
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    back() {
      this.$router.replace("paymessage");
    },
    async keep(id) {
      try {
        let res = await this.$axios.get("/cost/getCostDetail", {
          params: {
            id: id,
            token: this.ruleForm.token
          }
        });
        console.log(res, 1111);

        // 将返回的数据赋值给list对象
        if (res.data && res.data.length > 0) {
          this.list = {
            payname: res.data[0].payname || "",
            username: res.data[0].username || "",
            paymoney: res.data[0].paymoney || "",
            paylevel: res.data[0].paylevel || "",
            costtime: res.data[0].costtime || "",
            coststatus: res.data[0].coststatus || "",
            costtype: res.data[0].costtype || "",
            costcontent: res.data[0].costcontent || ""
          };

          // 根据costtype设置选中的支付方式
          // 注意：这里应该使用costtype而不是coststatus来判断支付类型
          this.selectedPayment = String(this.list.costtype) || "";
          console.log("选中的支付方式:", this.selectedPayment);
        }
      } catch (error) {
        console.error("获取详情失败:", error);
        this.$message.error("获取详情失败");
      }
    },

    // 格式化日期时间
    formatDateTime(date) {
      if (!date) return "Invalid date";
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, "0");
      const day = String(d.getDate()).padStart(2, "0");
      const hours = String(d.getHours()).padStart(2, "0");
      const minutes = String(d.getMinutes()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },

    // 获取支付状态文本
    getCostStatusText(status) {
      switch (status) {
        case 1:
          return "已支付";
        case 2:
          return "未支付";
        default:
          return "暂无";
      }
    }
  }
};
</script>

<style scoped>
.detail-container {
  padding: 20px;
}

.box {
  position: relative;
}

.detail-form {
  /* background-color: #f5f7fa; */
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.form-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.form-item {
  flex: 1;
  min-width: 300px;
  margin-right: 20px;
  margin-bottom: 10px;
}

.form-label {
  display: inline-block;
  width: 100px;
  font-weight: normal;
  color: #666;
  margin-bottom: 5px;
}

.form-value {
  padding: 1px 12px;
  
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  min-height: 32px;
  line-height: 1.5;
}

.payment-types {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}

.payment-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.payment-radio {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
}

.payment-type {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 5px;
}

.payment-type img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.return-btn {
  text-align: right;
  margin-top: 20px;
  position: fixed;
  top: 20%;
  right: 2%;
}

.form-rowq {
  margin: 40px 0;
}

.return-btn .el-button {
  padding: 8px 16px;
  border-radius: 4px;
}

/* 自定义单选框样式 */
.payment-radio
  ::v-deep
  .el-radio__input.is-disabled.is-checked
  .el-radio__inner {
  background-color: #409eff;
  border-color: #409eff;
}

.payment-radio ::v-deep .el-radio__input.is-disabled .el-radio__inner {
  background-color: #fff;
  border-color: #ccc;
}

.payment-radio ::v-deep .el-radio__input.is-disabled + .el-radio__label {
  color: #606266;
}
</style>